<template>
    <div class="flex items-center">
        <el-input-number class="flex-1" v-model="minValue" :max="maxValue" :controls="false" :placeholder="minPlaceholder" />
        <span class="pr-[10px] pl-[10px]">-</span>
        <el-input-number class="flex-1" v-model="maxValue" :min="minValue" :controls="false" :placeholder="maxPlaceholder" />
    </div>
</template>
<script lang="ts" setup>
import { computed, PropType } from 'vue'

const props = defineProps({
    modelValue: {
        type: Array as PropType<Array<any>>,
        default: () => ([])
    },
    minPlaceholder: {
        type: String,
        default: '极小值'
    },
    maxPlaceholder: {
        type: String,
        default: '极大值'
    }
})

const emit = defineEmits(['update:modelValue'])

const minValue = computed({
    get () {
        return props.modelValue[0]
    },
    set (val) {
        emit('update:modelValue', [val, props.modelValue[1]])
    }
})

const maxValue = computed({
    get () {
        return props.modelValue[1]
    },
    set (val) {
        emit('update:modelValue', [props.modelValue[0], val])
    }
})
</script>
<style lang="scss" scoped>
.el-input-number {
    width: auto;
}
</style>
